<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人员信息管理</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">登录名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="usercode\@like" placeholder="" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">员工姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username\@like" placeholder="" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">工作状态</label>
                            <div class="layui-input-inline">
                                <select name="enable" lay-search="">
                                    <option value="">全部</option>
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                                <i class="layui-icon layui-icon-search"></i>查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="user-table" lay-filter="user-table"></table>
            </div>
        </div>
    </div>

    <script type="text/html" id="user-toolbar">
        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
        <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </script>

    <script type="text/html" id="user-bar">
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>
        <button class="pear-btn {{d.delable=='0'?'pear-btn-disable':'pear-btn-danger'}} pear-btn-sm" lay-event="remove" title="删除" {{d.delable=="0"?'disabled':''}}><i class="layui-icon layui-icon-delete"></i></button>

    </script>

    <script type="text/html" id="user-enable">
        <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{d.enable=='0'?'':'checked'}}>
    </script>
</body>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'common', 'toast'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        var toast = layui.toast;

        let MODULE_PATH = "${ctxPath}/user/";

        let cols = [[
            {type: 'checkbox'},
            {title: '登录名', field: 'usercode', align: 'center'},
            {title: '员工姓名', field: 'username', align: 'center'},
            {title: '创建时间', field: 'createTime', align: 'center'},
            {title: '最后登录时间', field: 'lastLogin', align: 'center'},
            {title: '状态', field: 'enable', align: 'center', templet: '#user-enable'},
            {title: '操作', toolbar: '#user-bar', align: 'center', width: 130}
        ]];

        table.render({
            elem: '#user-table',
            url: MODULE_PATH + 'data/list',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#user-toolbar',
            defaultToolbar: "",
            height: 'full-180',
            done: function (res, curr, count) {
                for(var i = 0;i<res.data.length;i++) {
                    if(res.data[i].delable==0) {
                        var index = res.data[i]['LAY_TABLE_INDEX'];
                        $(".layui-table tr[data-index="+index+"] input[type='checkbox']").prop('disabled',true);
                        // $(".layui-table tr[data-index="+index+"] input[type='checkbox']").next().addClass('layui-btn-disabled');
                    }
                }
            }
        });

        form.on('submit(user-query)', function (data) {
            table.reload('user-table', {
                where: data.field,page: {curr: 1}
            });
            return false;
        });

        form.on('switch(user-enable)', function(obj){
            let loading = layer.load();
            $.ajax({
                url: MODULE_PATH+"userinfo/changeState?id="+this.value+"&state="+(obj.elem.checked?1:0),
                dataType:'json',
                type:'post',
                success:function(result){
                    layer.close(loading);
                    if(result.code == 0) {
                        toast.success({title: "系统消息", message: result.message,position: 'topRight'});
                    }else{
                        toast.error({title: "系统消息",message: result.message,position: 'topRight'});
                    }
                }
            });
        });

        table.on('tool(user-table)', function(obj){
            if(obj.event === 'remove'){
                window.remove(obj);
            } else if(obj.event === 'edit'){
                window.edit(obj);
            }
        });

        table.on('toolbar(user-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'delete') {
                window.batchRemove(obj);
            }
        });

        window.add = function() {
            layer.open({
                type: 2,
                title: '新增用户',
                shade: 0.1,
                area: ['400px', '380px'],
                content: MODULE_PATH + 'userinfo/add'
            });
        }

        window.edit = function(obj){
            layer.open({
                type: 2,
                title: '用户编辑',
                shade: 0.1,
                area: ['400px', '380px'],
                content: MODULE_PATH + 'userinfo/edit?id='+obj.data['id']
            });
        }

        window.remove = function(obj){
            layer.confirm('确定要删除该用户？', {icon: 3, title:'提示'}, function(index){
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH+"userinfo/remove?ids="+obj.data['id'],
                    dataType:'json',
                    type:'delete',
                    success:function(result){
                        layer.close(loading);
                        if(result.code == 0){
                            layer.msg(result.message,{icon:1,time:1000},function(){
                                obj.del();
                            });
                        }else{
                            layer.msg(result.message,{icon:2,time:1000});
                        }
                    }
                })
            });
        }

        window.batchRemove = function(obj){
            let data = table.checkStatus(obj.config.id).data;
            if(data.length === 0){
                layer.msg("未选中数据",{icon:3,time:1000});
                return false;
            }
            let ids = "";
            for(let i = 0;i<data.length;i++){
                ids += data[i].id+",";
            }
            ids = ids.substr(0,ids.length-1);
            layer.confirm('确定要删除这些用户？', {icon: 3, title:'提示'}, function(index){
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "userinfo/remove?ids=" + ids,
                    dataType:'json',
                    type:'delete',
                    success:function(result){
                        layer.close(loading);
                        if(result.code == 0){
                            layer.msg(result.message,{icon:1,time:1000},function(){
                                table.reload('user-table');
                            });
                        }else{
                            layer.msg(result.message,{icon:2,time:1000});
                        }
                    }
                })
            });
        }

        window.refresh = function (param) {
            table.reload('user-table');
        }
    });
</script>
</html>